<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 520px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
</style>
<template>
<div class="layout">
        <div class="layout-content">
            <Row>
                <Col span="3">
                     <Tree :data="classifyies" @on-select-change="onSelectionChangeTree"
 ></Tree>
                </Col>
                <Col span="21">

                    <div class="layout-content-main">
                           <Upload
                                multiple
                                type="drag"
                                name='avatar'
                                :before-upload="handleBeforeUpload"
                                :action="this.uploadUrl">
                                <div style="padding: 20px 0">
                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                    <p>点击或将文件拖拽到这里上传</p>
                                </div>
                        </Upload>
                       
                        <Button type="error" @click="onDeletes">删除多条记录</Button>
    <Input v-model="filter.filename" @on-enter="onSearch">
            <Button slot="append" icon="ios-search" @click="onSearch"></Button>           
        </Input>
    <Table border :columns="columns" :data="filter.list" @on-selection-change="onSelectionChange"></Table>
   <Page :total="filter.total" size="small"  
        show-total show-elevator show-sizer
        @on-change="onChange"
        @on-page-size-change="onPageSizeChange"></Page>
     <Modal
            v-model="modal"
            title="数据操作"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"  :label-width="80">                
                <FormItem label="作者" prop="filename">
                    <Input v-model="formValidate.filename" placeholder="文件名称" style="width: 300px"></Input>
                </FormItem>    
                <FormItem style="margin-top: 120px">
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal
            v-model="modal2"
            title="查看照片"
        >  <Card style="width:420px">
        <div style="text-align:center">
            <img style="width:100%" :src="imgSrc">
            <h3>{{imgName}}</h3>
        </div>
    </Card>
        </Modal>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
    
</template>
<script>
import Base from '../../common/base'
export default {
      mixins: [Base],
    data () {
     
        return {
        module:'upload',
          uploadUrl:'',
            imgSrc:'',
          imgName:'',
         modal2:false,
        formValidate: {//表单数据
               filename: '',
                typeId:''              
            },
             filter:{ //分页数据
                list:[],//装载数据
                total:0,//总记录
                page:1,//页码
                limit:10,
                filename:''
            },
            ruleValidate: {
                typeId: [
                    { required: true, message: '类别不能为空', trigger: 'blur' }
                ]
                },
                  columns: [
                {
                    type:'selection',
                    width:60,
                    align:'center'
                },
                {
                    title: '文件名',
                    key: 'filename',
                },
                {
                    title:'图片',
                    key:'filename',
                     render:(h,params)=>{
                    return h('img',{
                        attrs:{
                            src:'http://localhost:3000/'+params.row.filename,
                            style: 'width: 100px;height: 100px;'
                        }
                    })
                }
                },
                {
                    title: '文件大小',
                    key: 'size',
                },
                {
                    title: '文件类型',
                    key: 'mimetype',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.row)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        console.log(params);
                                        this.remove(params.row._id)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
        }
    },methods: {
       handleBeforeUpload(){
            if(this.typeId&&this.typeId.length>0){
                this.uploadUrl=`http://localhost:3000/upload/upload/${this.typeId}`;
                 this.getData();
                return true;              
            }else{
                 this.$Message.info('未选择类别');
                return false;
            }
        },
         getDataTree(){
            this.$http.get('http://localhost:3000/classify/list/2')
            .then(res=>{
                this.classifyies=res.data;
            })
        },
         show (row) {  
              this.modal2=true;
              this.imgSrc=`http://localhost:3000/${row.filename}`;
              this.imgName=row.filename
            },
    },
    created () {
        this.getDataTree();
    }
}
</script>

